<template>
	<view class="comBox">
		<block v-for="(item,index) in order_goods" :key="item.id" v-model="order_goods">
		<view class="comBg">
			<view class="goods">
				<view class="img"><image :src="item.product_image" mode=""></image></view>
				<view class="cont">
					<view class="tit">{{item.goods_name}}</view>
					<view class="ftit">规格：{{item.spec}}</view>
				</view>
			</view>
			<!-- 描述相符 -->
			<view class="describe">
				<view class="tit">描述相符</view>
				<view class="iconBox">
					<view class="icon" @click="order_goods[index].form.btnnum = 0" :class="{iconCurr:item.form.btnnum == 0}">
						<view class="iconfont icon-hao" :class="{'icon-hao2':item.form.btnnum == 0}"></view>
						<view class="name">好评</view>
					</view>
					<view class="icon" @click="order_goods[index].form.btnnum = 1" :class="{iconCurr:item.form.btnnum == 1}">
						<view class="iconfont icon-cha" :class="{'icon-cha2':item.form.btnnum == 1}"></view>
						<view class="name">中评</view>
					</view>
					<view class="icon" @click="order_goods[index].form.btnnum = 2" :class="{iconCurr:item.form.btnnum == 2}">
						<view class="iconfont icon-cha" :class="{'icon-cha2':item.form.btnnum == 2}"></view>
						<view class="name">差评</view>
					</view>
				</view>
			</view>
			<!-- 多角度评论 -->
			<view class="comTxt">
				<textarea v-model="item.form.cont" placeholder="✐从多个角度评价宝贝,可以帮助更多想买的人"></textarea>
				<!-- <view class="note">再写<text>10</text>字有机会被精选</view> -->
			</view>
			<!-- 拍摄 -->
			<view class="shotBox">
				<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
					<view class="shotImg">
						<view class="img" v-for="(img,Mindex) in item.form.images" :key="Mindex" data-index="{Mindex}" data-id="Mindex" v-model="item.form.images">
							<image :src="img"></image>
							<text class="iconfont icon-shanchu" @click="delBtn(index,Mindex)"></text>
						</view>
						<view class="shot" @click="upImage(index)">
							<view class="icon"><text class="iconfont icon-paizhaoshebei"></text></view>
							<view class="shotInfo">拍买家秀</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		</block>
		<!-- 评论 -->
		<view class="comBg starsBox">
			<view class="tit">物流服务评分</view>
			<view class="starts">
				<view class="row">
					<view class="name">物流速度</view>
					<view class="start"><rate @change="onChange" ></rate></view>
					<view class="cont">{{cont}}</view>
				</view>
				<view class="row">
					<view class="name">服务态度</view>
					<view class="start"><rate @change="onChange2"></rate></view>
					<view class="cont">{{cont2}}</view>
				</view>
			</view>
		</view>
		
		<view class="comBg starsBox">
			<button class="confirm-btn"  @click="subComment" :disabled="logining">提交评论</button>
		</view>
	</view>
</template>

<script>
	import rate from '../../../components/rate.vue'
	import {mapState} from 'vuex';
	export default {
		components:{rate},
		data() {
			return {
				index:0,
				cont:'非常好',
				cont2:'非常好',
				scrollInto: '',
				oid:'',
				shop_id:'',
				order_goods:[],
				shop_name:'',
				logistics:5,
				service:5,
				host:this.$api._api.ApiHost
			}
		},
		computed:{
			...mapState(['hasLogin','userInfo'])
		},
		onLoad(options) {
			var that = this
			let oid = options.oid
			that.oid = oid
			let _param = {oid:oid,token:that.userInfo.token}
			that.$api.getUrl(that.$api._api.ApiOrderOrderGoods,_param,function(res){
				
				res.map(re=>{
					re.form = {
						id:re.id,
						btnnum:0,
						cont:'',
						images:[]
					}
				})
				
				that.order_goods = res
			})
		},
		
		methods: {
			subComment:function(){
				var that = this
				let formData = [];
				that.order_goods.forEach((v,i)=>{
					formData.push(v.form)
				})
				let _param = {
					formData:formData,
					logistics:that.logistics,
					service:that.service,
					token:that.userInfo.token,
					oid:that.oid
				}
				that.$api.postUrl(that.$api._api.ApiCommentSub,_param,function(res){
					that.$api.msg('评论成功')
					setTimeout(function(){
						uni.navigateBack({
							delta:1
						})
					}, 800)
				})
			},
			upFile(filePath, index){
				uni.uploadFile({
					url: this.$api._api.ApiUpUpImg,
					filePath: filePath,
					name: 'image',
					success: (res) => {
						var data = JSON.parse(res.data)
						if(data.code == 200){
							this.order_goods[index].form.images.push(data.data.url);
						}
					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					}
				})
			},
			upImage(index){
				var that = this
				uni.chooseImage({
					count:5,
					sizeType:['compressed'],
					sourceType:['album'],
					success: (res) => {
						res.tempFilePaths.map(re=>{
							that.upFile(re, index)
						})
					},
					fail: (err) => {
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要从您的相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			// 点击删除
			delBtn(index,Mindex){
				this.order_goods[index].form.images.splice(Mindex,1);
			},
			onChange(d){
				this.cont = d.attitude
				this.logistics = d.value
			},
			onChange2(d){
				this.cont2 = d.attitude
				this.service = d.value
			}
		}
	}
</script>

<style lang="scss">
	page{background:#f0f0f0;}
	.comBg{background:#fff;border-radius: 10rpx;margin: 20rpx;padding: 20rpx;}
	.goods{
		display: flex;align-items: center;
		.img{width:120rpx;height:120rpx;overflow: hidden;border-radius: 6rpx;image{width: 100%;height: 100%;}}
		.cont{margin-left: 20rpx;flex: 1;}
		.tit{font-size: 30rpx;color:#555;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;
			-webkit-box-orient:vertical;-webkit-line-clamp:1
			}
		.ftit{font-size: 26rpx;color:#999;margin-top:10rpx;}
	}
	.describe,.iconBox,.iconBox .icon{display: flex;align-items: center;}
	.describe{
		margin-top:30rpx;
		.tit{margin-right: 20px;}
		.iconBox,.iconBox .icon{flex: 1;}
		.iconBox{
			.name{margin-left: 10rpx;}
		}
		.iconCurr .iconfont,.iconCurr .name{color:#f04447;}
	}
	.comTxt{margin-top: 30rpx;
		textarea{font-size: 28rpx;color:#999;width:100%;}
		textarea::-webkit-input-placeholder{color:#ccc;}
		.note{color:#999;font-size:26rpx;}
		.note text{color:#f04447;margin: 0 8rpx;}
	}
	.shotBox{margin-top: 30px;
		.shotImg{
			display: flex;padding: 10px 0;
			.img{width: 200rpx;height: 200rpx; margin-right:20rpx;position: relative;
				image{width: 100%;height: 100%;object-fit: cover;}
				text{position: absolute;display: block;width: 40rpx;height: 40rpx;text-align: center;
				line-height: 40rpx;right:0rpx;background: rgba(0,0,0,0.6);color:#fff;border-radius: 50%;
				top: -10rpx;
				}
			}
		}
		.shot{background:#eee;border: 1px dashed #ddd;width:200rpx;height: 200rpx;
			text-align: center;border-radius: 10rpx;
			.icon{margin-top:40rpx;}
			.icon .iconfont{font-size:80rpx;}
		}
	}
	.starsBox{
		.tit{font-size:32rpx;}
		.starts{margin-top: 30rpx;
			.row{display: flex;align-items: center;margin-bottom: 30rpx;}
			.name{font-size: 28rpx;font-weight: bold;}
			.start{flex:2;margin: 0 40rpx;}
			.cont{flex: 1;color:#f04447;font-size: 28rpx;font-weight: bold;}
		}
	}
	.confirm-btn{width: 630rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 50px;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;
		&:after{
			border-radius: 100px;
		}}
</style>
